<template>
  <div>
    <div class="sys-setting-panel">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="150px"
        @submit.prevent
      >
        <!--input输入-->
        <el-form-item label="注册邮箱标题" prop="registerEmailTitle">
          <el-input
            clearable
            placeholder="请输入注册邮件验证码标题"
            v-model="formData.registerEmailTitle"
          ></el-input>
        </el-form-item>
        <!--input输入-->
        <el-form-item label="注册邮件内容" prop="registerEmailContent">
          <el-input
            clearable
            placeholder="输入注册邮件内容"
            v-model="formData.registerEmailContent"
          ></el-input>
        </el-form-item>
        <!--input输入-->
        <el-form-item label="初始空间大小" prop="userInitUseSpace">
          <el-input
            clearable
            placeholder="请输入初始空间大小"
            v-model="formData.userInitUseSpace"
          >
            <template #suffix>MB</template>
          </el-input>
        </el-form-item>
        <!--input输入-->
        <el-form-item label="" prop="">
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { GetSysSettings, SaveSysSettings } from "@/api/admin.js";
const { proxy } = getCurrentInstance();

const formData = ref({
});
const formDataRef = ref();
const rules = {
  registerEmailTitle: [{ required: true, message: "请输入注册邮件验证码标题" }],
  registerEmailContent: [{ required: true, message: "输入注册邮件内容" }],
  userInitUseSpace: [
    { required: true, message: "请输入初始空间大小" },
    {
      required: true, type:"number",message: "空间大小只能是数字", trigger: "blur"
    },
  ],
};
const getSysSettings = async () => {
  formDataRef.value.resetFields();
  let result = await GetSysSettings();
  if (!result) {
    return;
  }
  formData.value = result.data;
  formDataRef.value.clearValidate(formData.value.userInitUseSpace);
};

const saveSettings = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, formData.value);
    let result = await SaveSysSettings(params);
    if (!result) {
      return;
    }
    proxy.Message.success(`保存成功~`);
    getSysSettings();
  });
};
onMounted(() => {
  getSysSettings();
});
</script>
  
  <style lang="scss" scoped>
.sys-setting-panel {
  margin-top: 20px;
  width: 600px;
}
</style>